<template>
	<view class="container">
		<view class="top-view">
			<classes-view @change="classChange" :hasChildren="false"/>
			<!-- <date-select-view @change="dateChange"></date-select-view> -->
		</view>
		
		<view v-if="albumList.length > 0" class="content-view">
			<u-grid :col="3" :border="false">
<!-- 				<u-grid-item :key="-1" @click="fabClick" :custom-style="{padding: '10rpx 0'}">
					<view class="add-view">
						<u-image src="https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/icon_album_add.png" width="54rpx" height="40rpx"></u-image>
						<text class="title">新建相册</text>
					</view>
				</u-grid-item> -->
				<u-grid-item v-for="(item, index) in albumList" :key="index"
					 :custom-style="{padding: '10rpx 0'}">
					<view style="width: 200rpx;height: 200rpx;position: relative;" @click="itemClick(item)">
						<u-image width="200rpx" height="200rpx" border-radius="20" :src="item.cover"></u-image>
						<u-image class="folder" width="61rpx" height="52rpx" src="https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/icon_album.png"></u-image>

						<view class="action">
							<view class="name">{{item.title}}</view>
							<view @click.stop="editClick(item)" class="edit">
								<u-icon name="edit-pen-fill" color="#ffffff" size="28"></u-icon>
							</view>
<!-- 							<view @click.stop="deleteClick(item)" class="delete">
								<u-icon name="trash-fill" color="#ffffff" size="28"></u-icon>
							</view> -->
						</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view v-else style="margin-top: 160rpx;">
			<u-empty text="您还没有相册哦" mode="list">
				<x-button slot="bottom" title="新建相册" style="margin-top: 50rpx;" @click="fabClick"></x-button>
			</u-empty>
		</view>
		<!-- <fab :content="content" @fabClick="fabClick"></fab> -->
	</view>
</template>

<script>
	import ClassesView from '@/components/classes-view.vue'
	import XButton from '@/components/x-button.vue'
	import Fab from '@/components/fab.vue'
	import { getAlbums, delAlbum } from '@/api/album.js'
	export default {
		components: {
			Fab,
			XButton,
			ClassesView
		},
		data() {
			return {
				albumList: [],
				
				content: [
				],
				
				src: 'https://saas.res.dotflat.cn/teach/file/photo/2c98d81f7cd97d0c017cd97dd1540002/2c92848466c992500166cd5171eb0012_1635737259625.jpeg'
			}
		},
		onLoad() {

		},
		methods: {
			classChange(res) {
				console.log(res);
				this.getAlbum(res.id)
			},
			getAlbum(classId) {
				this.classId = classId
				uni.showLoading({})
				getAlbums({classId}).then(res => {
					uni.hideLoading();
					console.log(res);
					this.albumList = res.data;
				})
			},
			itemClick(item) {
				console.log('itemClick')
				console.log(item)
				this.$u.route({
					url: 'pages_operate/album/album-photo-page',
					params: {
						albumId: item.id,
					}
				})
			},
			
			fabClick() {
				let that = this;
				uni.navigateTo({
					url: '/pages_operate/album/album-add-page',
					events: {
						addSuccessEvent: function(data) {
							that.getAlbum(that.classId);
						}
					}
				})
			},
			
			editClick(item) {
				const that = this;
				uni.navigateTo({
					url: `/pages_operate/album/album-add-page?id=${item.id}`,
					events: {
						addSuccessEvent: function(data) {
							that.getAlbum(that.classId);
						}
					}
				})
			},
			
			deleteClick(item) {
				uni.showModal({
					title: '删除',
					content: '您确认删除这个相册吗？',
					success: res => {
						if (res.confirm) {
							this.delAlbum(item)
						}
					}
				});
			},
			
			delAlbum(item){
				console.log(item)
				delAlbum({albumIds: item.id}).then(res => {
					this.getAlbum(that.classId)
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $app-page-bg-color;
	}
	.container{
		margin-top: 0rpx;
		
		.top-view{
			margin-left: 20rpx;
		}
	}
	.content-view{

		.folder{
			position: absolute;
			bottom: 20rpx;
			right: 20rpx;
		}
		
		.edit{
			
		}
		
		.delete{
			margin-left: 20rpx;
		}
		
		.action{
			position: absolute;
			bottom: 0rpx;
			width: 100%;
			background-color: RGB(119,136,153, 0.6);
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			padding: 10rpx;
			
			.name{
				color: #FFFFFF;
				font-size: 24rpx;
				margin-right: 10px;
			}
		}
	}
	
	.action-view{
		position: fixed;
		height: 100rpx;
		background-color: #FFFFFF;
		bottom: 0;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-right: 30rpx;
		
		box-shadow: 0px -1px 10px 0px rgba(138, 138, 138, 0.2);
	}
	
	.add-view{
		width: 200rpx;
		height: 200rpx;
		background: #FFFFFF;
		border: 2rpx solid #E8E8E8;
		border-radius: 20rpx;
		
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
				
		.title{
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
			margin-top: 10rpx;
		}
		
	}
</style>
